<template>
  <el-container>
    <el-main>
      <el-card>
        <div slot="header">
          <el-row>
            <el-col :span="12">
              <h3>业务类型</h3>
            </el-col>
            <el-col :span="12">
              <el-form :inline="true">
                <el-form-item label="业务类型">
                  <el-input v-model="name.name" placeholder="请输入业务类型"/>
                </el-form-item>
                <el-form-item>
                  <el-button plain type="success" @click="add()">添加业务类型</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>

        </div>
        <el-table :data="businessData">
          <el-table-column label="类型" prop="name"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="prop">
              <el-button plain type="primary" @click="dialog(prop.row)">修改</el-button>
              <el-button plain type="danger" @click="delect(prop.row.uuid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            :current-page.sync="businessParams.page"
            :page-size.sync="businessParams.size"
            :total="total"
            background
            layout="prev, pager, next,jumper"
            style="margin-top: 20px"
            @current-change="query"
        >
        </el-pagination>
      </el-card>

    </el-main>

    <el-dialog :visible.sync="visible" title="添加角色" width="30%">
      <el-form label-width="100px">
        <el-form-item label="业务类型">
          <el-input v-model="businessRowData.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="text-align: center" type="primary" @click="update()">修改业务类型</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </el-container>
</template>

<script>
import {addBusiness, delBusiness, pageBusiness, updateBusiness} from "../../../network/businessTypeApi";

export default {
  name: "business",
  data() {
    return {
      name: {name: ""},
      businessData: [],
      businessParams: {
        page: 1,
        size: 10
      },
      businessRowData: {},
      total: null,
      visible: false,
      id: {
        // uuid: null
      }
    }
  },
  methods: {
    query() {
      pageBusiness(this.businessParams).then(res => {
        console.log(res.data.records)
        this.businessData = res.data.records
        this.total = res.data.total
      })
    },
    add() {
      if (this.name.name.length === 0) {
        this.$message({
          type: 'error',
          message: '不能为空'
        })
      } else {
        this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addBusiness(this.name).then(res => {
            if (res.code === 2000) {
              this.name = {}
              this.query()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    dialog(row) {
      this.businessRowData = row
      this.visible = true
    },
    update() {
      updateBusiness(this.businessRowData).then(res => {
        console.log(res)
        if (res.code === 2000) {
          this.visible = false
          this.query()
        }
      })
    },
    delect(uuid) {

      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBusiness({uuid}).then(res => {
          if (res.code === 2000) {
            this.query()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })


    }
  },
  mounted() {
    this.query()
  }
}
</script>

<style scoped>

</style>